<MCard
    Class="mx-auto"
    MaxWidth="400">
    <MList>
        <MListItemGroup
            @bind-Value="model"
            ActiveClass="border"
            Color="indigo">
            @foreach (var item in items)
            {
                <MListItem @key="item">
                    <MListItemIcon>
                        <MIcon>@item.icon</MIcon>
                    </MListItemIcon>

                    <MListItemContent>
                        <MListItemTitle>@item.text</MListItemTitle>
                    </MListItemContent>
                </MListItem>
            }
        </MListItemGroup>
    </MList>
</MCard>

<style>
.border {
  border: 2px dashed orange;
}
</style>

@code {

    List<(string icon, string text)> items = new()
    {
        ("mdi-wifi", "Wifi"),
        ("mdi-bluetooth", "Bluetooth"),
        ("mdi-chart-donut", "Data Usage"),
    };

    StringNumber model = 1;

}